<template>
    <div ref="chart" style="width: 100%; height: 400px;"></div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  
  const chart = ref(null);
  
  const categories = ['优秀', '良好', '合格', '待合格'];
  const gradeTotal = [200, 300, 400, 100]; // 年级总人数示例数据
  const classData = [
    [50, 70, 90, 30],  // 班级1人数

  ];
  
  onMounted(() => {
    const myChart = echarts.init(chart.value);
  
    const series = [
      {
        name: '年级',
        type: 'bar',
        data: gradeTotal,
        itemStyle: {
          color: '#10C0AC'
        },
        label: {
          show: true,
          position: 'top'
        }
      },
      ...classData.map(data => ({
        name: '班级',
        type: 'bar',
        data,
        itemStyle: {
          color: '#33A4ED'
        },
        label: {
          show: true,
          position: 'top'
        }
      }))
    ];
  
    const option = {
      tooltip: {},
      legend: { data: ['年级', '班级'] },
      xAxis: { type: 'category', data: categories },
      yAxis: { type: 'value' },
      series,
      title: [
    {
      text: '学生分层'
    }
  ],
    };
  
    myChart.setOption(option);
  });
  </script>
  
  <style scoped>
  </style>
  